import './index.scss';
import React, { Component } from 'react'
import services from 'services';
import classNames from 'classnames';
import PageLayout from 'layouts/Page';
import Steps from 'components/Steps';
import Button from 'components/Button';
import Container from 'components/Container';
import * as PREORDER from 'constants/preorder';

@PageLayout({ classNames: 'page-preorder-payment-fail', title: '支付状态', showCrmButton: true })
class Page extends Component {
  stepsData = {
    steps: [{}, {}, {}, {}]
  }

  constructor(props) {
    super(props);

    this.state = {
      currentIndex: 0,
    };
  }

  componentDidMount() {
    //  默认关闭页面
    this.props.setHeader({
      onBack: () => {
        location.href = 'jzapp://close_web_page';
      }
    });
    
    const recordId = this.props.match.params.recordId;
    services.Preorder.getPreorderDetail(recordId).then(res => {
      let { data, code } = res.data;

      if (code == 0) {
        this.setState({
          detail: data.recordDetail,
          currentIndex: data.recordDetail.status == 0 ? 0 : 2
        });
      }
    });
  }

  pay = () => {
    let { status, queueRecordId, prepayOrderNo, postPayOrderNo } = this.state.detail;
    let isPrepayUnPay = status == PREORDER.PREPAY_UNPAID;
    location.href = `jzapp://wechat_payment?orderId=${isPrepayUnPay ? prepayOrderNo : postPayOrderNo}&recordId=${queueRecordId}&orderType=${ isPrepayUnPay ? 'preorder' : 'postorder'}`;
  }

  render() {
    let {
      detail,
      currentIndex,
    } = this.state;

    if (!detail) return null;

    return (
      <div className={`steps${currentIndex + 1}`}>
        <Steps {...this.stepsData} currentIndex={currentIndex} cantBack />

        <Container>
          <div className="card pay-fail-card">
            <div className="pay-fail-tips">
              <h3>支付失败</h3>
              <small>支付遇到问题，请尝试重新支付</small>
            </div>

            <ul className="list">
              <li>
                <div className="key">接种城市及疫苗：</div>
                <div className="value">{detail.queueName}</div>
              </li>
              <li>
                <div className="key">接种人姓名：</div>
                <div className="value">{detail.name}</div>
              </li>
              <li>
                <div className="key">身份证号：</div>
                <div className="value">{detail.idCardNo}</div>
              </li>
              <li>
                <div className="key">手机号：</div>
                <div className="value">{detail.mobile}</div>
              </li>
            </ul>
            <Button type={`block primary`} onClick={this.pay}>重新支付</Button>
          </div>
        </Container>
      </div>
    )
  }
}

export default Page;